<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>新建任务</title>
</head>
<body>
<div class="container">
    <div class="jumbotron">
        <h1 class="display-4">新建任务！</h1>
        <p class="lead">管理数据更新任务，包括任务的删改查等操作。</p>
        <hr class="my-4">
        <div class="row">
            <div class="btn-group col-6 mb-3" role="group" aria-label="example">
                <button type="button" class="btn btn-outline-success">
                    <span class="oi oi-plus"></span> 新增
                </button>
                <button type="button" class="btn btn-outline-warning">
                    <span class="oi oi-pencil"></span> 修改
                </button>
                <button type="button" class="btn btn-outline-danger">
                    <span class="oi oi-minus"></span> 删除
                </button>
            </div>
            <div class="input-group col-6 mb-3">
                <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="basic-addon">
                <div class="input-group-append">
                    <button class="btn btn-outline-success" type="button">
                        <span class="oi oi-magnifying-glass"></span>
                    </button>
                    <button type="button" class="btn btn-outline-success">
                        <span class="oi oi-reload"></span>
                    </button>
                    <button class="btn btn-outline-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="oi oi-list"></span>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">JSON</a>
                        <a class="dropdown-item" href="#">XML</a>
                        <a class="dropdown-item" href="#">CSV</a>
                        <a class="dropdown-item" href="#">TXT</a>
                        <a class="dropdown-item" href="#">MS-Excel</a>
                    </div>
                </div>
            </div>
        </div>
        <table class="table table-hover">
            <thead>
            <tr>
                <th scope="col">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <th scope="col">任务名称</th>
                <th scope="col">任务描述</th>
                <th scope="col">创建时间</th>
                <th scope="col">任务详情</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
                <td><a href="#" data-toggle="modal" data-target="#taskDetailModal">详情</a></td>
            </tr>
            <tr>
                <th scope="row">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
                <td><a href="#" data-toggle="modal" data-target="#taskDetailModal">详情</a></td>
            </tr>
            <tr>
                <th scope="row">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td><a href="#" data-toggle="modal" data-target="#taskDetailModal">详情</a></td>
            </tr>
            <tr>
                <th scope="row">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td><a href="#" data-toggle="modal" data-target="#taskDetailModal">详情</a></td>
            </tr>
            <tr>
                <th scope="row">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td><a href="#" data-toggle="modal" data-target="#taskDetailModal">详情</a></td>
            </tr>
            <tr>
                <th scope="row">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td><a href="#" data-toggle="modal" data-target="#taskDetailModal">详情</a></td>
            </tr>
            <tr>
                <th scope="row">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td><a href="#" data-toggle="modal" data-target="#taskDetailModal">详情</a></td>
            </tr>
            <tr>
                <th scope="row">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td><a href="#" data-toggle="modal" data-target="#taskDetailModal">详情</a></td>
            </tr>
            <tr>
                <th scope="row">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td><a href="#" data-toggle="modal" data-target="#taskDetailModal">详情</a></td>
            </tr>
            <tr>
                <th scope="row">
                    <input type="checkbox" aria-label="Checkbox for following text input">
                </th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td><a href="#" data-toggle="modal" data-target="#taskDetailModal">详情</a></td>
            </tr>
            </tbody>
        </table>
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-end">
                <li class="page-item disabled">
                    <a class="page-link" href="#" tabindex="-1">Previous</a>
                </li>
                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                    <a class="page-link" href="#">Next</a>
                </li>
            </ul>
        </nav>
    </div>
</div>

<!-- 任务详情 Modal -->
<div class="modal fade" id="taskDetailModal" tabindex="-1" role="dialog" aria-labelledby="taskDetailModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="taskDetailModalLabel">详情</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="card" style="margin-bottom: 1rem">
                    <div class="card-body">
                        <h5 class="card-title">任务详情</h5>
                        <hr>
                        <div class="form-group row">
                            <label for="taskName" class="col-3 col-form-label text-right">任务名称</label>
                            <div class="col-9">
                                <input type="text" readonly class="form-control-plaintext" id="taskName" value="名称">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="taskDescription" class="col-3 col-form-label text-right">任务描述</label>
                            <div class="col-9">
                                <input type="text" readonly class="form-control-plaintext" id="taskDescription" value="描述">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="taskTime" class="col-3 col-form-label text-right">创建时间</label>
                            <div class="col-9">
                                <input type="text" readonly class="form-control-plaintext" id="taskTime"
                                       value="2018-01-30 19:43:19">
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">执行结果</h5>
                        <hr>
                        <div class="form-group row">
                            <label for="executeResult1" class="col-3 col-form-label text-right">执行结果</label>
                            <div class="col-9">
                                <input type="text" readonly class="form-control-plaintext" id="executeResult1" value="成功">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="spendTime1" class="col-3 col-form-label text-right">所用时间</label>
                            <div class="col-9">
                                <input type="text" readonly class="form-control-plaintext" id="spendTime1" value="7秒">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="startTime1" class="col-3 col-form-label text-right">开始时间</label>
                            <div class="col-9">
                                <input type="text" readonly class="form-control-plaintext" id="startTime1"
                                       value="2018-01-30 19:43:19">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="endTime1" class="col-3 col-form-label text-right">结束时间</label>
                            <div class="col-9">
                                <input type="text" readonly class="form-control-plaintext" id="endTime1"
                                       value=" 2018-01-30 19:43:26">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="successTimes1" class="col-3 col-form-label text-right text-success">成功次数</label>
                            <div class="col-9">
                                <input type="text" readonly class="form-control-plaintext text-success"
                                       id="successTimes1" value="5">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="defaultTimes1" class="col-3 col-form-label text-right text-danger">失败次数</label>
                            <div class="col-9">
                                <input type="text" readonly class="form-control-plaintext text-danger" id="defaultTimes1"
                                       value="0">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>